<template>
  <div>
    <Banner></Banner>
    <TopRecommend></TopRecommend>
    <!--各个分区-->
    <div v-for="item in partitions" :key="item.id" class="partition-area">
      <PartitionBlock :partition="item"></PartitionBlock>
    </div>
    <router-link to="/help" class="contact-help" target="_blank">帮助</router-link>
    <el-backtop>UP</el-backtop>
  </div>
</template>

<script>
import Banner from "@/components/banner/Banner.vue";
import TopRecommend from "@/components/topContent/TopRecommend.vue";
import PartitionBlock from "@/components/PartitionBlock/PartitionBlock.vue";
import { queryFirstLevelPartitions } from "@/api/partition.js";
export default {
  components: {
    Banner,
    TopRecommend,
    PartitionBlock,
  },
  data() {
    return {
      partitions: [],
    };
  },
  mounted() {
    this.queryPartitions();
  },
  methods: {
    queryPartitions() {
      queryFirstLevelPartitions().then((res) => {
        this.partitions = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.partition-area {
    padding: 0 10vw 0 10vw;
    // min-width: 1000px;
}
.contact-help {
  position: fixed; 
  z-index: 1;
  right: 0;
  top: 50%;
  margin-top: -36px;
  width: 28px;
  height: 58px;
  transition: all 0.3s;
  font-size: 16px;
  color: #505050;
  background: #fff;
  border: 1px solid #e7e7e7;
  box-shadow: 0 6px 10px 0 #e7e7e7;
  border-radius: 0 2px 2px 0;
  padding: 8px 7px;
  line-height: 21px;
}
</style>